import React from 'react';
import styles from './index.less';
import { Link } from 'umi';

import IconFont from '../iconFont';

export default (props: {
  direction: string;
  title: string;
  meta: string;
  content: string;
  url: string;
}) => {
  if (props.direction == 'left') {
    return (
      <div className={styles.box}>
        <div className={styles.content}>
          <div className={styles.cover}>
            <img
              className={styles.bg}
              src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg"
            />
          </div>
          <div className={styles.info}>
            <Link className={styles.info_title} to={props.url}>
              {props.title}
            </Link>
            <div className={styles.info_meta}>
              <span className={styles.meta_date}>
                <IconFont use={'ngcrili'} />
                <span>发表于</span>
                <time dateTime={'2020-11-11T03:34:16.036Z'}>2020-11-11</time>
              </span>
            </div>
            <div className={styles.info_content}>{props.content}</div>
          </div>
        </div>
      </div>
    );
  }

  if (props.direction == 'right') {
    return (
      <div className={styles.box}>
        <div className={styles.content}>
          <div className={styles.info}>
            <Link className={styles.info_title} to={props.url}>
              {props.title}
            </Link>
            <div className={styles.info_meta}>
              <span className={styles.meta_date}>
                <IconFont use={'ngcrili'} />
                <span>发表于</span>
                <time dateTime={'2020-11-11T03:34:16.036Z'}>2020-11-11</time>
              </span>
            </div>
            <div className={styles.info_content}>{props.content}</div>
          </div>
          <div className={styles.cover_right}>
            <img
              className={styles.bg}
              src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg"
            />
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className={styles.box}>
      <div className={styles.cover}>
        <img
          className={styles.bg}
          src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg"
        />
      </div>
      <div className={styles.info}>
        <Link className={styles.info_title} to={props.url}>
          {props.title}
        </Link>
        <div className={styles.info_meta}>
          <span className={styles.meta_date}>
            <IconFont use={'ngcrili'} />
            <span>发表于</span>
            <time dateTime={'2020-11-11T03:34:16.036Z'}>2020-11-11</time>
          </span>
        </div>
        <div className={styles.info_content}>{props.content}</div>
      </div>
    </div>
  );
};
